<template>
  <button class="my-btn" :class="{ inline: inline }" :style="{
    width: btnStyle.width,
    height: btnStyle.height,
    fontSize: btnStyle.fontSize,
    borderRadius: btnStyle.borderRadius,
    color: color,
    background: bg,
    border: border,
    display: inline ? 'inline-flex' : 'flex'
  }"
    hover-class="hover" :disabled="disabled" :open-type="openType" @click="onClick">
    <slot></slot>
  </button>
</template>

<script>
  export default {
    props: {
      size: {
        type: Array,
        default: () => []
      },
      color: {
        type: String,
        default: '#000'
      },
      bg: String,
      inline: Boolean,
      disabled: Boolean,
      round: Boolean,
      border: String,
      openType: String
    },
    computed: {
      btnStyle() {
        return this.btnInit()
      }
    },
    methods: {
      btnInit() {
        let [width = 1, height = 90, fontSize = 36] = this.size

        return {
          width: width == 1 ? '100%' : width + 'rpx',
          height: height + 'rpx',
          fontSize: fontSize + 'rpx',
          borderRadius: this.round ? height / 2 + 'rpx' : '10rpx'
        }
      },
      onClick() {
        this.$emit('click', true)
      }
    }
  }
</script>

<style lang="scss">
  .my-btn {
    position: relative;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    letter-spacing: 1px;
    padding: 0;

    &.inline {
      margin-left: 0;
      margin-right: 0;
    }

    &.hover {
      opacity: 0.8;
    }
  }

  .my-btn::after {
    border: none;
  }
</style>
